<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>用户管理</span>
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span>{{isAdd ? '添加权限' : '修改权限'}}</span>
    </div>
    <form class="form-horizontal" id="" @submit.prevent="submit"> 
      <div class="form-group">
          <label for="inputtext" class="col-sm-2 control-label col-sm-offset-2">权限：</label>
          <div class="col-sm-6">
            <input type="text" class="form-control jsgl-tab" id="inputtext" name="remoteip" value="" placeholder="权限名称" v-model="privilegeName">
          </div>
      </div>
      <div class="form-group">
          <label for="inputnumber2" class="col-sm-2 control-label col-sm-offset-2">设备：</label>
          <div class="col-sm-6 ">
            <div class="jsgl-tab-one">
              <table class="table table-bordered jsgl-tab-one-tab" id="tblDevice">
                <tbody> 
                  <tr v-for="(item, index) in deviceList">
                    <td width="5%"><input type="checkbox" v-model="selDeviceIds" v-bind:value="item.deviceid"></td>
                    <td width="20%" class="list-one">{{item.devicename}}</td>
                    <td width="20%" class="list-one">{{item.deviceid}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
      </div>
      <p class="lx_btn">
        <button type="submit" class="btn btn-default btn-lg">保存</button>
        <button type="button" onclick="window.history.go(-1)" class="btn btn-default btn-lg">返回</button>
      </p>
    </form>   
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'AddPermission',
    data: function () {
      return {
        privilegeId: this.$route.params.privilegeId || '',
        selDeviceIds: [],
        method: this.$route.params.method || 'add',
        deviceList: [],
        privilegeName: ''
      }
    },
    created: function () {
      this.isAdd = this.method === 'add'
      if (!this.isAdd) {
        this.editInit()
      }
      this.deviceInit()
    },
    computed: {
      selArray: function () {   // 已选数据
        var selArray = []
        for (var i in this.selDeviceIds) {
          var item = this.selDeviceIds[i]
          var selObj = this.deviceList.find(function (o) {
            return o.deviceid === item
          })
          selArray.push({
            deviceid: selObj.deviceid,
            devicename: selObj.devicename
          })
        }
        return selArray
      }
    },
    methods: {
      submit: function () {
        var data = {
          method: 'AddPrivilege',
          privilegename: this.privilegeName,
          array: this.selArray
        }
        if (!this.isAdd) {
          data.method = 'UpdatePrivilege'
          data.privilegeid = this.privilegeId
        }
        this.$http.post('/api/hedacmdreq', data).then(response => {
          var body = response.data.HedaACK.Body
          window.duang.msg(true, body.retMsg)
        })
      },
      editInit: function () {
        var $this = this
        function getPrivilegeDevice () {
          return $this.$http.post('/api/hedacmdreq', {method: 'PrivilegeDevice', privilegeid: $this.privilegeId})
        }
        function getDeviceSearch () {
          return $this.deviceList
        }
        // 统一请求，处理，必须要等2个请求全完成才能开始处理该数据
        axios.all([getPrivilegeDevice(), getDeviceSearch()]).then(axios.spread((myRes, res) => {
          console.log('myDeviceList', myRes)
          console.log('deviceList', res)
          this.privilegeName = myRes.data.HedaACK.Body.privilegename
          var myList = myRes.data.HedaACK.Body.devicelist
          for (var i in myList) {
            var item = myList[i]
            this.selDeviceIds.push(item.deviceid)
          }
        }))
      },
      deviceInit: function () {
        this.$http.post('/api/hedacmdreq', {method: 'DeviceSearch'}).then(response => {
          var body = response.data.HedaACK.Body
          this.deviceList = body.devicelist || []
        })
      }
    }
  }
</script>
